<template>
  <div class="container">
    <section class="inputImg">
      <label class="inputArea">
        <input
          class="fileInput"
          type="file"
          accept="image/*"
          @change="handleFile"
        />
        <span class="placeholder" v-show="!currentImage"
          >点击上传图片或拖拽图片至此处</span
        >
        <img v-show="currentImage" class="preview" :src="currentImage" />
      </label>
      <label class="pixelSlider">
        <span class="sliderTitle">像素大小</span>
        <input
          class="slider"
          type="range"
          min="1"
          max="10"
          v-model="scale"
          @change="changeScale"
        />
        <span class="sliderText">{{ scale }}</span>
      </label>
    </section>
    <section class="outputImg" ref="outputImg">
      <h3>preview:</h3>
      <canvas ref="conversionView"></canvas>
      <a ref="downloadBtn" class="downloadBtn">download</a>
    </section>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
let currentImage = ref("");
let scale = ref(1);
const conversionView = ref(null);
const outputImg = ref(null);
const downloadBtn = ref(null);
function handleFile(e) {
  let file = e.target.files[0];
  if (!file.type.match("image.*")) {
    return;
  }
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (data) {
    currentImage.value = data.target.result;
    render();
  };
}
function changeScale() {
  render();
}
function render() {
  if (!currentImage.value) {
    alert("请先上传图片");
    return;
  }
  const canvasTemp = document.createElement("canvas");
  const context = canvasTemp.getContext("2d");

  const image = new Image();
  image.src = currentImage.value;
  image.onload = function () {
    canvasTemp.width = (image.width * scale.value) / 100;
    canvasTemp.height = (image.height * scale.value) / 100;
    // 缩小到 25%
    context.drawImage(image, 0, 0, canvasTemp.width, canvasTemp.height);

    // var imageData = context.getImageData(
    //   0,
    //   0,
    //   (image.width * scale.value) / 100,
    //   (image.height * scale.value) / 100
    // );

    const dataURL = canvasTemp.toDataURL();
    const ctx = conversionView.value.getContext("2d");
    const img = new Image();
    img.src = dataURL;
    img.onload = function () {
      let defaultWidth = outputImg.value.offsetWidth * 0.8;
      let defaultHeight = defaultWidth * 0.618;
      let imgWidth = (img.width * 100) / scale.value;
      let imgHeight = (img.height * 100) / scale.value;
      if (imgWidth >= imgHeight / 0.618) {
        imgHeight = (defaultWidth / imgWidth) * imgHeight;
        imgWidth = defaultWidth;
      } else {
        imgWidth = (defaultHeight / imgHeight) * imgWidth;
        imgHeight = defaultHeight;
      }
      conversionView.value.width = imgWidth;
      conversionView.value.height = imgHeight;

      // 反锯齿
      ctx.imageSmoothingEnabled = false;
      ctx.mozImageSmoothingEnabled = false;
      ctx.webkitImageSmoothingEnabled = false;
      ctx.msImageSmoothingEnabled = false;

      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
      console.log(downloadBtn);
      downloadBtn.value.download = "pixel.png";
      downloadBtn.value.href = conversionView.value.toDataURL();
      console.log(downloadBtn, 111);
    };
  };
}
</script>

<style scoped>
.container {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
}
.inputArea {
  margin: 0 auto;
  margin-top: 70px;
  display: block;
  width: 80%;
  height: 300px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #333;
  box-shadow: 5px 5px #333;
}
.placeholder {
  display: block;
  text-align: center;
  line-height: 300px;
  font-family: pixel_en, pixel_ch;
  font-weight: bold;
}
.pixelSlider {
  margin: 30px auto;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  align-items: center;
  justify-items: center;
  width: 80%;
  cursor: var(--cursor_normal);
}
.sliderTitle {
  font-family: pixel_en, pixel_ch;
}
.slider {
  width: 100%;
  cursor: var(--cursor_pointer);
}
.sliderText {
  font-family: pixel_en, pixel_ch;
}
.fileInput {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  opacity: 0;
  cursor: var(--cursor_pointer);
}
.preview {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  cursor: var(--cursor_pointer);
}
.outputImg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
h3 {
  margin-top: 30px;
  font-family: pixel_en, pixel_ch;
  font-size: var(--title_large);
  margin-left: 20%;
}
canvas {
  border: 1px solid;
  border-radius: 5px;
  box-shadow: 5px 5px #333;
  align-self: center;
}
.downloadBtn {
  display: block;
  width: 180px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border: 1px solid;
  border-radius: 50%;
  box-shadow: 5px 5px #333;
  transform: skewX(-8deg);
  margin-top: 40px;
  font-family: pixel_en, pixel_ch;
  font-size: var(--text_large);
  cursor: var(--cursor_pointer);
  align-self: center;
  text-decoration: none;
  color: black;
  margin-bottom: 40px;
}
</style>
